/* chinese */
@font-face {
  font-family: slogan;
  src: url(txrh2.hxd);
}
/* vietnamese */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(exo-viet.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(exo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(exo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@import url('../../../css2.css');
:root {
    --max-screen-radio: 1760 * 720 ;
    --img-width-scale: .7 ;
    --img-margin-scale: .15 ;
    --slogan-last-margin-radio: 2.25;
}
@media (max-aspect-ratio: 1080/2640) {
    :root {
      --max-screen-radio: 1840 * 720 ;
      --img-width-scale: .7 ;
      --img-margin-scale: .15 ;
      --slogan-last-margin-radio: 2.25;
    }
}

@media (min-aspect-ratio: 720/1280) {
    :root {
      --max-screen-radio: 1280 * 720 ;
      --img-width-scale: .5 ;
      --img-margin-scale: .25 ;
      --slogan-last-margin-radio: 2.75;
    }
}

@media (aspect-ratio: 720/1280) {
    :root {
      --max-screen-radio: 1280 * 720 ;
      --img-width-scale: .5 ;
      --img-margin-scale: .25 ;
      --slogan-last-margin-radio: 2.75;
    }
}

* { z-index: 0; }
* a { text-decoration: none; }
 body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
 body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(rgba(118, 0, 191, 0.5) 0%, transparent 70%), linear-gradient(#0b161e 40%, #202076 70%);
    perspective: 700px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "PingFang SC", "Microsoft JhengHei", "Noto Sans CJK SC", "Helvetica Neue", sans-serif;
    font-size: clamp(10px, 2vw, 20px);
}

:root {
  /* Set neon color */
  --neon-text-color: #1d6aff;
  --neon-border-color: #08f;
}



 #proxy .content{
     z-index: 2;
	width: calc(100vh / var(--max-screen-radio));
	max-width: 100vw;
	height: 100vh;
	margin: auto;
 }
 .lines {
     z-index: 1;
    position: fixed;
    width: 100vw;
    height: 4em;
    background: linear-gradient(rgb(254 89 89 / 20%) 20%, rgb(228 89 254) 40%, #bf59fe 60%, rgb(254 89 89 / 20%) 80%);
    background-size: 1px 0.5em;
    box-shadow: 0 0 1em rgb(254 89 89 / 40%);
    transform: translateY(-1em);
    -webkit-transform: translateY(-1em);
    left: 0;
    opacity: 85%;
}
/* .grid {*/
/*     z-index: 1;*/
/*    background: linear-gradient(transparent 65%, rgba(46, 38, 255, 0.4) 75%, #7d41e6 80%, rgba(46, 38, 255, 0.4) 85%, transparent 95%), linear-gradient(90deg, transparent 65%, rgba(46, 38, 255, 0.4) 75%, #7d41e6 80%, rgba(46, 38, 255, 0.4) 85%, transparent 95%);*/
/*    background-size: 30px 30px;*/
/*    width: 200vw;*/
/*    height: 300vh;*/
/*    position: absolute;*/
/*    bottom: -120vh;*/
/*    transform: rotateX(-100deg);*/
/*    -webkit-transform: rotateX(-100deg);*/
/*    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 80%);*/
/*    opacity: 25%;*/
/*}*/
 img.logo {
     z-index: 10;
    position: absolute;
    top: 1vh;
    width: calc( 70vh / var(--max-screen-radio) * var(--img-width-scale));
 }
 img.girl {
     z-index: 4;
    position: absolute;
    top: 1vh;
    width: calc( 100vh / var(--max-screen-radio) * var(--img-width-scale));
    margin: 0 calc( 100vh / var(--max-screen-radio) * var(--img-margin-scale));
 }
 img.wheel {
    z-index: 5;
    position: absolute;
    top: 29vh;
    width: calc( 100vh / var(--max-screen-radio) * var(--img-width-scale));
    margin: 0 calc( 100vh / var(--max-screen-radio) * var(--img-margin-scale));
 }
 img.deco {
    z-index: 3;
    position: absolute;
    bottom: -5px;
    width: max(105vw, 110vh);
    left: min(-2.5vw, 55vh);
    filter: blur(5px);
    opacity: 60%;
 }
 h1.slogan {
    z-index: 10;
    font-family: slogan,'Exo';
    font-size: calc( 100vh / var(--max-screen-radio) * .5 / 100 * 30);
    margin: 0;
    transform: skew(-15deg, -5deg);
     -webkit-transform: skew(-15deg, -5deg);
    letter-spacing: 0em;
    word-break: keep-all;
    white-space: nowrap;
    animation-name: slide-from-right;
    animation-duration: 3s;
    animation-delay: -2s;
}
 @keyframes slide-from-right {
    50%   {margin-left:100vw;}
    100%  {margin-left:none;}
}
 h1.slogan.first {
    position: absolute;
    margin-left: calc( 100vh / var(--max-screen-radio) * .5 / 100 * 20 );
    margin-top: 37vh;
 }
 h1.slogan.last {
    position: absolute;
    margin-left: calc( 100vh / var(--max-screen-radio) * .5 / 100 * 40 );
    margin-top: calc( 37vh + 1vh * 3 * var(--slogan-last-margin-radio) );
 }
 h1.slogan.last::after {
    content: '';
    position: absolute;
    z-index: 20;
    top: -0.15em;
    right: -0.25em;
    width: 0.8em;
    height: 0.8em;
    background: radial-gradient(white 3%, rgba(255, 255, 255, 0.3) 15%, rgba(255, 255, 255, 0.05) 60%, transparent 80%), radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 60%) 50% 50% / 5% 100%, radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 60%) 50% 50% / 70% 5%;
    background-repeat: no-repeat;
}
 h1.slogan span:first-child {
    display: block;
    position: relative;
    z-index: 11;
    -webkit-text-stroke: 0.1em rgba(0, 0, 0, 1.0);
}
 h1.slogan span:nth-child(2) {
    position: absolute;
    z-index: 12;
    left: 0;
    top: 0;
   -webkit-text-stroke: 0.1em #08074c;
/*    text-shadow: -0.2rem -0.2rem 1rem #7be5ff, 0.2rem 0.2rem 1rem #fff, 0 0 1rem var(--neon-text-color), 0 0 3rem var(--neon-text-color), 0 0 9rem var(--neon-text-color);*/
}
 h1.slogan span:last-child {
    position: absolute;
    z-index: 13;
    left: 0;
    top: 0;
    /*background-image: linear-gradient(#032d50 25%, #00a1ef 35%, white 50%, #20125f 50%, #8313e7 55%, #ff61af 75%);*/
    background-image: linear-gradient(#140d7d 13%, #445fb8 23%, #d1e0fd 50%, white 55%, #33033b 50%, #e26dbe 67%, #ffbfff 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
 .buttons {
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100vh / var(--max-screen-radio));
    max-width: 100vw;
    row-gap: 2vh;
 }
 .buttons-1 {
    z-index: 15;
    position: absolute;
    margin-top: calc(39vh + 1vh * 3 * 6);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100vh / var(--max-screen-radio));
    max-width: 100vw;
    height: 7vh;
    row-gap: 2vh;
 }

 .buttons-1 .proxy-id {
    z-index: 14;
    display: none;
    color: white;
    width: 70%;
    margin: 0 15%;
    padding: 0.5em;
    border-radius: 2em;
    background-color: #FFFFFF33;
    text-shadow: 3px 2px 2px #000000BB;
    box-shadow: 5px 5px 5px #00000088;
    text-align: center;
    font-size: 2.5vh;
    font-weight: bold;
}
 .buttons .btn {
    z-index: 30;
    position: relative;
    height: 10vh;
    width: max(50%, 30vh);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
    cursor: pointer;
 }
 .buttons-1 .btn-1 {
    z-index: 31;
    position: relative;
    height: 7vh;
    width: max(50%, 30vh);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
    justify-content: center;
    align-items: center;
 }
 .buttons .game-icon {
    height: 10vh;
 }
 .buttons .game-icon img {
    height: 100%;
 }

  .buttons .tutorial-icon {
    height: 5vh;
 }
  .buttons .tutorial-icon img {
    height: 100%;
 }
 .buttons-1 .store-button {
    height: 100%;
    margin: 0 0.5rem;
 }
 .buttons-1 .store-button img {
    height: 100%;
 }
 .buttons .btn .play-icon {
    height: 10vh;
    width: 28vh;
    display: flex;
    gap: 1vh;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid #ffbfff;
    border-radius: 99em;
    background-image: linear-gradient(#1e1d7a 5%, #c0a7f6 60%, #d8e3ff 100%);
    box-shadow: 0px 0.75vh 1px #353493;
    }
.buttons .btn .play-icon img {
    display: block;
    width: 20%;
    margin: auto 0;
}
.buttons .btn .play-icon div {
    position: relative;
    width: 50%;
}
.buttons .btn .play-icon span {
    display: inline;
    font-family: slogan,'Exo',sans-serif;
    font-size: 3.5vh;
    top: -2vh;
    transform: skew(-7.5deg);
    -webkit-transform: skew(-7.5deg);
    white-space: nowrap;
}
 .buttons .btn .play-icon span:first-child {
    position: absolute;
    left: 0;
    font-weight: 600;
    -webkit-text-stroke: 0.1em #202076;
}
.buttons .btn .play-icon span:last-child {
    position: absolute;
    left: 0;
    font-weight: 600;
    background-image: linear-gradient(white 25%, #5e76dc 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}